<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 下面的两种克隆都是浅克隆 操作不了对象里面嵌套对象的对象
        // 想操作嵌套对象的对象 不改变源对象的情况 只能深克隆


        // 克隆一个一模一样的对象
        var user = {
            name: "jad",
            age: 23,
        }
        // 方法一 直接赋值 无用方法 因为两个变量操作的是一个对象

        // 方法二 浅克隆
        // 创建一个空对象 对要克隆的对象进行遍历
        // 把遍历到的元素 加入到 空数组
        // 这里只能用[]语法 .语法不行
        var obj = {};
        for (var key in user) {
            obj[key] = user[key];
        }
        obj.name = "张三";
        console.log(obj, user);

        // 方法三 Object.assign(a,b,c,d) 浅克隆
        // 将bcd里边的属性依次添加到a里面 遇到重复的就覆盖
        var objO = Object.assign({}, user);
        objO.name = "花裤衩";
        console.log(objO, user);










        // 对于以下对象 ,实现浅克隆 ,会有什么问题
        var admin = {
            name: "peter",
            age: 24,
            child: {
                name: "小红",
                age: 2,
            },
        };

        var res2 = Object.assign({}, admin);
        res2.name = "赵四"; // admin 的name 没有受到影响
        res2.child.name = "小明"; // admin 的  child  属性 里边的 name 属性 受到了影响
        console.log(res2, admin);

        // 浅克隆只是把 第一层的属性 克隆了一遍(互不影响), 但是 对于第二层, 第三层...的属性 只是简单地 赋值(会相互影响)

        // 想实现 克隆一个对象, 不管多少层(都互不影响)  使用 深克隆
    </script>
</body>

</html>